<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			body{
				width: 100%;
				height: 100000px;
				background-image: url(img/库洛米.jpg);
				background-size: contain;
				/* 函数 cover 等比例放大图片  特点：原图按照比例放大存背景空间
				     【开发者：背景图大小是否等于背景空间】
				     contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
					 【开发者：背景图等比例显示在背景空间】
				 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment: fixed; /* 固定   scroll  移动*/
			}
			di v{
				width: 300px;
				height: 300px;
				background-color: #00ffff;
				background: #ffaa7f;
				background-image: url(img/库洛米1.jpg);
				/* 问题：超大图-不显示   小图-显示
				   注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat: no-repeat;
				/* no-repeat不平铺  repeat-x,y  横，纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值：数值px % | 函数 cover contain */
				/* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, nobis pariatur? Aspernatur, saepe. Sunt repudiandae placeat eligendi similique totam reiciendis at aliquam ullam, mollitia nemo recusandae pariatur possimus odio sit?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa est, cupiditate quas eaque minima tenetur error iure dolor facere quos mollitia provident molestias itaque consequatur praesentium neque dignissimos atque culpa.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur laboriosam, quos blanditiis ullam reprehenderit harum nam placeat nesciunt sapiente, nulla explicabo eum. Ex, eos aut. Aut magni vitae praesentium officiis?
		<!-- html  img图片   引入一张图片  ，位置不可随意改变
			 css   背景图片  引入一张图片  ，位置可以随意改变
			 子属性  background-color  背景颜色
			        background-image  背景图
					background-repeat  背景重复
					background-size  背景尺寸
					background-attachment  背景附件
					background-position  背景定位
			 复合属性 background:background-image background-color background-position
			                    background-size background-repeat和background-attachment
			 简写属性 background：background-image     background-position|size
						                                          background-repeat|ttachment
			 替代子属性：background-image、background-color、 background-repeat 
			  
			  
			替代子属性
			    
			-->
		<div></div>
	</body>
</html>